import React, {useEffect} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {Col, Fade, Row} from "reactstrap";
import {SET_SCHEDULABLE_FIELD, SET_SCHEDULE_FIELD} from "../../../../../../redux/constants/schedules";
import DataAndTime from "../Components/DataAndTime";
import {setFieldData} from "../../../../../../redux/actions/helper";
import Organization from "../../../../../../components/general/YandexAPI/Organization";
import {parseLocationData} from "../../../../../../helpers/utils";
import Select from "react-select";

const Travel = props => {
  const {setFieldData, schedule, scheduleId, travel, companyValid, setCompanyValid} = props;

  const transport = {
    car: {value: 'car', label: 'авто'},
    train: {value: 'train', label: 'поезд'},
  }
  const transportArr = [
    {value: 'car', label: 'авто'},
    {value: 'train', label: 'поезд'},
  ]

  const transportChange = e => {
      setFieldData(SET_SCHEDULABLE_FIELD, 'transport', e.value)
  }

  const departureOnClick = e => {
    if (e.properties) {
      setFieldData(SET_SCHEDULABLE_FIELD, 'departure', parseLocationData(e))
    }
  }
  const departureOnChange = e => {
    setFieldData(SET_SCHEDULABLE_FIELD, 'departure', {name: e})
  }
  const arrivalOnClick = e => {
    if (e.properties) {
      setFieldData(SET_SCHEDULABLE_FIELD, 'arrival', parseLocationData(e))
    }
  }
  const arrivalOnChange = e => {
    setFieldData(SET_SCHEDULABLE_FIELD, 'arrival', {name: e})
  }

  return (
    <React.Fragment>
      <Row>
        <Col md={5} className="align-self-center">
          <div className="description"/>
          <Select
            className={`schedule-item schedule-input-select mt-1`}
            classNamePrefix="dark_select"
            value={transport[travel.transport]}
            options={transportArr}
            isSearchable={false}
            onChange={transportChange}
            name='typesList'
            isDisabled={scheduleId}
          />
        </Col>
        <Col md={7} className="align-self-center">
          <DataAndTime
            dateDesc={'Дата начала'}
            timeDesc={'Время начала'}
            begin={schedule.begin}
            end={schedule.end}
            setFieldData={setFieldData}
            type="begin"
          />
        </Col>
      </Row>
      <Row>
        <Col md={5} className="align-self-center">
          <div className="description"/>
          <Organization
            id='placeTabInfo'
            className={`schedule-item schedule-input`}
            placeholder='Город отправления'
            onClick={departureOnClick}
            onChange={departureOnChange}
            value={travel.departure && travel.departure.name}
          />
        </Col>
        <Col md={7} className="align-self-center">
          <DataAndTime
            dateDesc={'Дата конца'}
            timeDesc={'Время конца'}
            begin={schedule.begin}
            end={schedule.end}
            setFieldData={setFieldData}
            type="end"
          />
        </Col>
      </Row>
      <Row>
        <Col md={5} className="align-self-center">
          <div className="description"/>
          <Organization
            id='placeTabInfo'
            className={`schedule-item schedule-input`}
            placeholder='Город прибытия'
            onClick={arrivalOnClick}
            onChange={arrivalOnChange}
            value={travel.arrival && travel.arrival.name}
          />
        </Col>
        <Col md={7} className="align-self-center">
          <div className="description"/>
          <input placeholder={'№ поезда/авто'}
                 onChange={e => setFieldData(SET_SCHEDULABLE_FIELD, 'number', e.target.value)}
                 value={travel.number}
                 className={`schedule-item schedule-input`}/>
        </Col>
      </Row>
      <Fade in={travel.transport === 'car'} unmountOnExit>
        <Row>
          <Col md={5} className="align-self-center">
            <div className="description"/>
            <input placeholder={'Номер водителя'}
                   onChange={e => setFieldData(SET_SCHEDULABLE_FIELD, 'phone', e.target.value)}
                   value={travel.phone}
                   className={`schedule-item schedule-input`}/>
          </Col>
          <Col md={7} className="align-self-center">
            <div className="description"/>
            <input placeholder={'Имя водителя'}
                   onChange={e => setFieldData(SET_SCHEDULABLE_FIELD, 'name', e.target.value)}
                   value={travel.name}
                   className={`schedule-item schedule-input`}/>
          </Col>
        </Row>
      </Fade>
    </React.Fragment>
  );

}

const mapStateToProps = state => ({
  travel: state.schedules.schedule.schedulable
});
const mapDispatchToProps = dispatch => bindActionCreators({
  setFieldData
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Travel);
